<template>
  <div class="bg">
    <div class="wholebox">
      <div class="sign">
        <h1>Login</h1>
      </div>
      <form action="" class="inputbox">
        <input type="text" v-model="loginForm.username" placeholder="用户名" />
        <br />
        <input
          type="password"
          v-model="loginForm.password"
          placeholder="密码"
        />
        <br />
        <button class="btn" @click="loginClick" type="button">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: { username: "", password: "" },
    };
  },
  methods: {
    loginClick() {
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$toast("请输入用户名和密码");
      } else {
        this.$http.post("/login", this.loginForm).then((res) => {
          this.$auth.setAuthorization(res.data.token);
          this.$router.push("/my");
        });
      }
    },
  },
};
</script>

<style scoped>
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: "Open Sans", sans-serif;
  background: url("../assets/bg2.jpg");
}
h1 {
  color: white;
  letter-spacing: 3px;
  text-align: center;
  font-size: 2em;
}
input {
  width: 220px;
  height: 20px;
  margin-bottom: 20px;
  padding: 10px 10px 10px 18px;
  font-size: 13px;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    rgb(85, 110, 66, 0.9) rgb(216, 207, 198, 0.9)
  );
}
.btn {
  height: 40px;
  width: 250px;
  border-color: rgba(110, 211, 241, 0.9);
  background-color: rgba(4, 205, 255, 0.842);
  border: none;
  color: white;
  font-size: 15px;
  border-radius: 8px;
}
.sign {
  font-size: 20px;
  margin-bottom: 20px;
}
.wholebox {
  margin-top: 200px;
}
::-webkit-input-placeholder {
  color: rgb(9, 17, 55);
}
::-moz-placeholder {
  color: rgb(9, 17, 55);
}
:-ms-input-placeholder {
  color: rgb(9, 17, 55);
}
</style>